<template>
  <div class="demo-title">tabbar/demo6</div>
  <Tabbar v-model="active" @tab-switch="setActiveIndex">
    <TabbarItem v-for="item in itemList" :tab-title="item.title" :key="item.name">
      <template #icon>
        <Icon :name="item.iconName" />
      </template>
    </TabbarItem>
  </Tabbar>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { Tabbar, TabbarItem } from '@sscd-mobile/tabbar'
  import Icon from '@sscd-mobile/icon'
  const active = ref(1)
  const itemList = [
    { title: '标签1', iconName: 'home', name: 'home' },
    { title: '标签2', iconName: 'shop', name: 'shop' },
    { title: '标签3', iconName: 'order', name: 'order' },
    { title: '标签4', iconName: 'my', name: 'my' }
  ]
  const setActiveIndex = (_value, index) => {
    active.value = index
  }
</script>

<style lang="less" scoped></style>
